<template>
	<view :class="tab==3?'':'login'">
		<view v-if="tab==1" class="bg" style="height: 480rpx;">
			<u-navbar leftText="" title="账号登录" bgColor="transparent" titleStyle='color:#fff' :border-bottom="false" :placeholder="true" :safeAreaInsetTop="true" placeholder
				@leftClick="left">
				<view slot="left">
					<image src="https://cdn.yowswl.com/image/admin/2023/11/17/3bac986d2962488ab7ea2d176abfd15c4zoswk2mkr.png" style='width: 60rpx;height: 60rpx;' @click='toindex'></image>
				</view>
			</u-navbar>
			<view style="margin-top: 40rpx;display: flex;padding-left: 30rpx;">
				<image :src="logo" mode="" style="width: 130rpx;height: 130rpx;border-radius: 40rpx;"></image>
			    <view style="margin-left: 20rpx;color: #fff;font-size: 52rpx;">
					<view class="">您好,</view>
					<view class="">欢迎使用吸盘鲨</view>
				</view>
			</view>
		</view>
		<view v-else-if='tab==4'>
			<u-navbar leftText="" title="登录" bgColor="#3277fc" titleStyle='color:#fff' :border-bottom="false" :placeholder="true" :safeAreaInsetTop="true" placeholder
				@leftClick="left">
				<view slot="left">
					<image src="https://cdn.yowswl.com/image/admin/2023/11/17/3bac986d2962488ab7ea2d176abfd15c4zoswk2mkr.png" style='width: 60rpx;height: 60rpx;' @click='toindex'></image>
				</view>
			</u-navbar>
		</view>
		<view v-else-if='tab==3'>
			<u-navbar leftText="" title="修改密码" bgColor="#fff" titleStyle='color:#000' :border-bottom="false" :placeholder="true" :safeAreaInsetTop="true" placeholder
				@leftClick="left">
				<view slot="left">
					<image src="https://cdn.yowswl.com/image/admin/2023/11/17/c93ebda9e65a42609c87eae8a002e13b9edi3mad5z.png" style='width: 60rpx;height: 60rpx;' @click='toindex'></image>
				</view>
			</u-navbar>
		</view>
		<view v-if="tab==1" style="background-color: #fff;border-radius: 40rpx 40rpx 0 0;padding:40rpx;position:absolute;left: 0;width: 90%;top: 24%;height: 75%;">
			<u-form :model="params" :rules="rules" ref="form" errorType="toast" label-width="60rpx">
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  prop="account"
					class="in" borderBottom>
					<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
					    <u-icon name="phone" color="#5e94fc" size="28"></u-icon>
						<view style="margin-left: 10rpx;color: #000;font-size: 28rpx;font-weight: 650;">手机号</view>
					</view>
					<u--input v-model="params.account" border="none" placeholder="请输入您的手机号码"></u--input>
				</u-form-item>
				<u-form-item prop="pwd" class="in" borderBottom>
					<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
					    <u-icon name="lock" color="#5e94fc" size="28"></u-icon>
						<view style="margin-left: 10rpx;color: #000;font-size: 28rpx;font-weight: 650;">密码</view>
					</view>
					<u--input v-model="params.pwd" border="none" type="password" placeholder="请输入您的密码"></u--input>
				</u-form-item>
			</u-form>
			<view class="u-flex u-row-between" style="line-height: 100rpx;padding: 0 20rpx;">
				<view @tap="changeTab(4)"></view>
				<view @tap="changeTab(3)" style='color:#c5c5c5'>忘记密码?</view>
			</view>
			<view style="margin-top: 60rpx;">
				<u-button type="success" @tap="wxLogin()" :customStyle="{backgroundColor:'#3277fc',height:'90rpx'}" shape="circle">
					登录</u-button>
					<u-button type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						:customStyle="{backgroundColor:'#fff',height:'90rpx',marginTop:'40rpx',border:'2rpx solid #3277fc',color:'#3277fc'}" shape="circle">
						微信一键登录</u-button>
			</view>
			<view style="display: flex;align-items: center;">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" @change="check"></u-checkbox>
				</u-checkbox-group>
				<view style="font-size: 28rpx;margin-top: 40rpx;">
					我已阅读并同意<text style="color: #3277fc;"
						@tap="goInfo('user_agreement')">《用户协议》</text>和<text style="color: #3277fc;"
						@tap="goInfo('privacy_agreement')">《隐私协议》</text>相关内容
				</view>
			</view>
		</view>
		<view v-else style="padding: 0 20rpx;" :style="{backgroundColor:tab==3?'#fff':'transparent',marginTop:tab==3?'':'20rpx',borderRadius:tab==3?'':'20rpx'}">
			<view v-if="tab==2">
				<u-form labelPosition="left" :model="params" :rules="rules" ref="form1" errorType="toast"
					label-width="60rpx">
					<u-form-item prop="account" leftIcon="phone" class="in" borderBottom>
						<u--input v-model="params.account" border="none" placeholder="手机号"></u--input>
					</u-form-item>
					<u-form-item prop="code" class="in " leftIcon="chat" borderBottom>
						<view class="u-flex u-row-left" style="flex-wrap: nowrap;">
							<view style="width: 500rpx;">
								<u--input v-model="params.code" border="none" placeholder="请输入验证码" type="number">
								</u--input>
							</view>
							<view class="u-flex u-row-left">
								<u-toast ref="uToast"></u-toast>
								<u-code :seconds="seconds" @end="end" @start="start" ref="uCode1" @change="codeChange"
									keep-running>
								</u-code>
								<view @tap="getCode(2,'uCode1')" style="color: #F0AD4E;font-size: 24rpx;">{{tips}}
								</view>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="nickname" class="in" leftIcon="tags" borderBottom>
						<u--input v-model="params.nickname" border="none" placeholder="昵称"></u--input>
					</u-form-item>
					<u-form-item leftIcon="lock" prop="pwd" class="in" borderBottom>
						<u--input v-model="params.pwd" border="none" type="password" placeholder="密码"></u--input>
					</u-form-item>
					<u-form-item prop="spreadUid" class="in" leftIcon="account" borderBottom>
						<u--input v-model="params.spreadUid" border="none" placeholder="推荐人(ID号)"></u--input>
					</u-form-item>
				</u-form>
				<view class="m-t-20">
					<u-button type="success" @tap="register()" :customStyle="{backgroundColor:'#F76968'}"
						shape="circle">注册</u-button>
				</view>
				<view class="u-flex u-row-between" style="line-height: 100rpx;padding: 0 20rpx;">
					<view @tap="changeTab(1)">登录</view>
					<view @tap="changeTab(3)">忘记密码</view>
				</view>

			</view>

			<view v-if="tab==3" style="padding: 40rpx;">
				<u-form labelPosition="left" :model="params" :rules="rules" ref="form2" errorType="toast"
					label-width="60rpx">
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  prop="account"
						class="in" borderBottom>
						<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
						    <u-icon name="phone" color="#5e94fc" size="28"></u-icon>
							<view style="margin-left: 10rpx;color: #000;font-size: 28rpx;font-weight: 650;">手机号</view>
						</view>
						<u--input v-model="params.account" border="none" placeholder="请输入您的手机号码"></u--input>
					</u-form-item>
					<u-form-item prop="code" class="in "  borderBottom>
						<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
						    <u-icon name="more-circle" color="#5e94fc" size="28"></u-icon>
							<view style="margin-left: 10rpx;color: #000;font-size: 28rpx;font-weight: 650;">验证码</view>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<u--input v-model="params.code" border="none" placeholder="请输入短信验证码"></u--input>
							<view class="u-flex u-row-left">
								<u-toast ref="uToast"></u-toast>
								<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"
									keep-running>
								</u-code>
								<view @tap="getCode(1,'uCode')" style="color:#3277fc;font-size: 26rpx;">{{tips}}</view>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="pwd" class="in" borderBottom>
						<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
						    <u-icon name="lock" color="#5e94fc" size="28"></u-icon>
							<view style="margin-left: 10rpx;color: #000;font-size: 28rpx;font-weight: 650;">密码</view>
						</view>
						<u--input v-model="params.pwd" border="none" type="password" placeholder="请输入您的密码"></u--input>
					</u-form-item>
				</u-form>
				<view style="margin-top: 80rpx;">
					<u-button type="success" @tap="updatePwd()" :customStyle="{backgroundColor:'#3277fc',height:'90rpx'}"
						shape="circle">确认修改</u-button>
				</view>
				<u-button type="success" @tap="tab=1" :customStyle="{backgroundColor:'#fff',height:'90rpx',marginTop:'30rpx',border:'2rpx solid #3277fc',color:'#3277fc'}"
					shape="circle">返回登录</u-button>
			</view>

			<view v-if="tab==4">
			    <view style="background-color: #fff;border-radius: 40rpx;padding: 60rpx 0;margin-top: 50rpx;">
					 <view class="u-flex u-row-center">
					 		<image :src="logo" style="width: 150rpx;height: 150rpx;border-radius:50%;border: 2rpx solid #3277fc;" />
					 	</view>
					 	<view
					 		style="padding: 30rpx;margin-top: 20rpx;text-align: center;margin-bottom: 45rpx;">
					 		<view class="wm_weight_flod" style="font-size: 34rpx;">吸盘鲨申请获得以下权限</view>
					 		<view style="color:#737373;margin-top: 30rpx;font-size: 28rpx;">
					 			获得您的公开信息(昵称、头像、手机号码等)
					 		</view>
					 		<view style="color:#4f8bfc;font-size: 22rpx;margin-top: 15rpx;">
					 			如不同意授权则联系客服，获取内部账号进行登录。
					 		</view>
					 	</view>
					 	<u-button v-if="full" type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					 		:customStyle="{backgroundColor:'#3277fc',width:'80%',height:'100rpx'}" shape="circle">
					 		授权登录</u-button>
					 
					 	<u-button v-else type="success" @tap="parsePhone()"
					 		:customStyle="{backgroundColor:'#3277fc',width:'80%',height:'100rpx'}" shape="circle">
					 		登录</u-button>
					 
					 	<u-button :customStyle="{width:'80%',height:'100rpx',marginTop:'30rpx',border:'2rpx solid #3277fc',color:'#3277fc'}" shape="circle" @tap="toindex()">
					 		暂不授权</u-button>
						<view class=""  style="margin-top: 80rpx;">
						    <view style="padding: 0 140rpx;">
							    <u-divider text="其他登录方式" textColor='#6e6e6e' lineColor='#eeeeee' style="text-align: center;"></u-divider>	 
							</view>
							<view @tap="changeTab(1)">
								<view class="u-flex u-row-center">
									<view class="u-flex u-row-center"
										style="height: 100rpx;width: 100rpx;border-radius: 50%;">
										<image src="https://cdn.yowswl.com/image/admin/2023/11/17/9ff4f22f647e44a59613ed349d30d33854br0drq5n.png" style='width:100%;height:100%;'></image>
									</view>
								</view>
								<view class="u-flex u-row-center"
									style="line-height: 50rpx;padding: 0 20rpx;font-size: 26rpx;color: #9e9e9e;">
									<view>账号登录</view>
								</view>
							</view>
						
						</view>
					 	<view style="display: flex;align-items: center;padding: 0 50rpx;">
					 		<u-checkbox-group>
					 			<u-checkbox v-model="checked" shape="circle" @change="check"></u-checkbox>
					 		</u-checkbox-group>
					 		<view style="font-size: 28rpx;margin-top: 40rpx;">
					 			点击登录时将自动注册，请同意下方协议进行登录：<text style="color: #3277fc;"
					 				@tap="goInfo('user_agreement')">《用户协议》</text>和<text style="color: #3277fc;"
					 				@tap="goInfo('privacy_agreement')">《隐私协议》</text>
					 		</view>
					 	</view>
					 
					 </view>
				</view>	
		    </view>
	<!-- 	<view class="" v-if=" tab==1" style="margin-top: 150rpx;">

			<u-divider text="其他方式" style="text-align: center;"></u-divider>
			<view @tap="changeTab(4)">
				<view class="u-flex u-row-center">
					<u-icon name="weixin-circle-fill" size="120rpx" color="#05c162" />
				</view>
				<view class="u-flex u-row-center"
					style="line-height: 50rpx;padding: 0 20rpx;font-size: 26rpx;color: #8F8F94;">
					<view>一键登录</view>
				</view>
			</view>

		</view> -->

	</view>
</template>

<script>
	import {
		h5Login,
		userRegister,
		userUpdatePwd,
		sendCode,
		userAuth,
		h5LoginInfo
	} from '@/api/user.js'
	import $store from "../../store";
	import {
		goNav
	} from '@/lib/Comment.js'
	import {
		getConfig,
	} from "@/api/public.js"
	import {
		getUrlParams
	} from '@/util/util.js'

	var _self;
	export default {
		data() {
			return {
				full: true,
				registerParams: {},
				checked: false,
				code: '',
				logo: '',
				flag: true,
				tips: '',
				seconds: 60,
				tab: 4,
				current: 0,
				list: [{
					name: '登录',
					value: 1
				}, {
					name: '注册',
					value: 2
				}, {
					name: '修改密码',
					value: 3
				}],
				params: {
					account: '',
					pwd: '',
				},

				rules: {
					'account': [{
							required: true,
							message: "请输入手机号码",
							trigger: ['blur', 'change']
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: "手机号码格式不正确",
							trigger: ['blur', 'change']
						}
					],
					'pwd': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'spreadUid': {
						type: 'string',
						required: true,
						message: '推荐人',
						trigger: ['blur', 'change']
					},
					'code': [{
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					}, {
						min: 6,
						max: 6,
						message: '验证码长度为6',
						trigger: ['blur', 'change']
					}],
					'nickname': [{
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					}, {
						min: 1,
						max: 16,
						message: '昵称长度为1-16个字符',
						trigger: ['blur', 'change']
					}]
				},
			}
		},
		onLoad(option) {
			getConfig("sms_time").then(res => {
				this.seconds = parseInt(res.data.value)
			})

			getConfig("home_logo").then(res => {
				this.logo = res.data.value
			})
			if (option.tab) {
				this.tab = option.tab
			}
			_self = this

			console.log('>>>>近了》》》》', option)
			if (option.type == 'spread' && option.uid) {
				this.$store.commit("SETSPREADUID", option.uid)
			}


			if (option.scene) {
				console.log('近了了，奇怪的东西1')
				let val = decodeURIComponent(option.scene)
				val = getUrlParams(val)

				console.log('.....val', val)


				if (val.type == 'spread' && val.uid) {
					this.$store.commit("SETSPREADUID", val.uid)
				}

			}



		},
		onShow() {
			
			this.params.spreadUid = this.$store.getters.spreadUid
			this.params.action = this.$store.getters.action
			let that = this
			// wx.login({
			// 	success(res) {
			// 		console.log('....>>>', res.code)
			// 		that.code = res.code
			// 	}
			// })
			uni.login({
				provider: 'weixin',
				success: function(code_res) {
					if (code_res.errMsg == "login:ok") {
						let code = code_res.code;
						_self.code = code;

					}
				}
			});
		},
		onReady() {
			$store.commit("SETBACKLOGIN", false)
		},
		methods: {
			check(e) {
				console.log(e);
				this.checked = e
			},
			toindex() {
				
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goInfo(name) {
				uni.navigateTo({
					url: "/pages/sub/user/settingInfo?name=" + name
				})
			},
			
			// 获取手机号
			getPhoneNumber(e) {
				if (this.checked) {
					console.log('>>>手机号', e)
					// this.getCode();
					// if (!this.decodePhoneParams.code || !e.detail.encryptedData) {
					// 	return false;
					// }
					// this.decodePhoneParams.encryptedData = e.detail.encryptedData;
					// this.decodePhoneParams.iv = e.detail.iv;
					if (!e.detail.encryptedData) {
						uni.showToast({
							title: '授权失败，请刷新~'
						})
						return false
					}
					this.registerParams = {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}
					// this.full = false
					_self.registerParams.code = _self.code
					// _self.registerParams.avatarUrl = user.userInfo.avatarUrl
					// _self.registerParams.nickName = user.userInfo.nickName
					_self.registerParams.spreadUid = _self.$store.getters.spreadUid
					console.log('>>>jinLL》》》》1111', JSON.stringify(_self
						.registerParams))
					userAuth(_self.registerParams).then(res => {
						_self.$store.commit("LOGIN", res
							.data);
						console.log('>>>>>ddddddddd', _self.$store.getters
							.backUrl)
						// goNav("/" + _self.$store.getters
						// 	.backUrl)
						uni.navigateBack(1)
					}).catch(err => {
						uni.showToast({
							title: err,
							'icon': 'none'
						})
					})
				} else {
					uni.showToast({
						title: '请先勾选协议',
						icon: 'none'
					})
				}
			},
			parsePhone() {
				uni.getUserProfile({
					desc: "获取用户基本资料",
					lang: 'zh_CN',
					success: (user) => {
						//获取成功基本资料后开启登录，因为基本资料首先要授权

						_self.registerParams.code = _self.code
						_self.registerParams.avatarUrl = user.userInfo.avatarUrl
						_self.registerParams.nickName = user.userInfo.nickName
						_self.registerParams.spreadUid = _self.$store.getters.spreadUid
						console.log('>>>jinLL》》》》1111', JSON.stringify(_self
							.registerParams))
						userAuth(_self.registerParams).then(res => {
							_self.$store.commit("LOGIN", res
								.data);
							console.log('>>>>>ddddddddd', _self.$store.getters
								.backUrl)
							goNav("/" + _self.$store.getters
								.backUrl)
						}).catch(err => {
							uni.showToast({
								title: err,
								'icon': 'none'
							})
						})



					},
					fail: (res) => {
						uni.showModal({
							title: "用户拒绝授权",
							showCancel: false
						})
					}
				});
			},
			left() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			updatePwd() {
				this.$refs.form2.validate().then(res => {
					userUpdatePwd(this.params).then(res => {
						this.params.code = ''
						this.$store.commit("LOGOUT");
						this.tab = 1
						uni.showToast({
							title: "修改成功",
							icon: 'none'
						})
					})
				}).catch(errors => {})
			},
			register() {
				this.$refs.form1.validate().then(res => {
					userRegister(this.params).then(res => {
						this.params.code = ''
						uni.showToast({
							title: "注册成功",
							icon: 'none'
						})
						this.changeTab(1)
					})
				}).catch(errors => {})
			},
			getCode(value, name) {
				if (!this.flag) return
				if (!this.$u.test.mobile(this.params.account)) {
					return this.$u.toast('请输入正确的手机号');
				}
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})

				sendCode({
					phone: this.params.account,
					value: value
				}).then(res => {
					console.log('>发送验证码')
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs[name].start();
				}).catch(err => {
					console.log('发送失败', err)
					this.$u.toast(err);
					uni.hideLoading();
				})
			},
			end() {
				this.flag = true
			},
			start() {
				this.flag = false
			},
			codeChange(text) {
				this.tips = text;
			},
			changeTab(value) {
				this.tab = value
				this.params = {
					spreadUid: this.params.spreadUid
				}
			},
			wxLogin() {
			  if(this.checked){
				   let that = this
				  this.$refs.form.validate().then(res => {
				  	//#ifdef H5
				  	h5LoginInfo(this.params).then(res => {
				  		that.$store.commit("LOGIN", res
				  			.data);
				  		console.log("resssss>", that
				  			.$store
				  			.getters.backUrl);
				  		let path = that.$store.getters
				  			.backUrl
				  		if (path == 'pages/login/h5Login' ||
				  			path == '/' || !path) {
				  			path = 'pages/index/index'
				  		}
				  		goNav("/" + path)
				  
				  		uni.switchTab({
				  			url: '/pages/index/index'
				  		})
				  	}).catch(err => {
				  		console.log('err', err)
				  	})
				  	//#endif
				  	//#ifdef MP
				  	uni.login({
				  		provider: 'weixin',
				  		success: function(code_res) {
				  			if (code_res.errMsg == "login:ok") {
				  				let code = code_res.code;
				  				console.log('>>>jinLL', code)
				  				that.params.code = code
				  				
				  				h5Login(that.params).then(res => {
				  	
				  					that.$store.commit("LOGIN",
				  						res
				  						.data);
				  					console.log("resssss>",
				  						that
				  						.$store
				  						.getters.backUrl);
				  					let path =
				  						'pages/index/index'
				  					// uni.navigateTo({
				  					// 	url: '/pages/index/index'
				  					// })
				  					if (path ==
				  						'pages/login/h5Login' ||
				  						path == '/' || !path) {
				  						path =
				  							'pages/index/index'
				  					}
				  	
				  					// goNav("/" + path)
				  					console.log(1111);
				  					uni.switchTab({
				  						url: '/pages/index/index'
				  					})
				  				}).catch(err => {
				  					console.log('err', err)
				  				})
				  	
				  			}
				  		}
				  	});
				  	//#endif
				  }).catch(errors => {})
			  }else{
				  uni.showToast({
				  	title: '请先勾选协议',
				  	icon: 'none'
				  })
			  }
			},
			weChatLogin() {
				// 获取code 小程序专有，用户登录凭证。

			},
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
		
	}
</style>
<style scoped lang="scss">
	.login {
		position: relative;
		height: 100%;
		background-color:#3277fc;
	}

	.content {
		padding: 20rpx;
	}
    .bg{
		background: url(https://cdn.yowswl.com/image/admin/2023/11/17/4a1779ca1a79417da50a27abb740f0a6jwmx9k273v.png) 100% 100% no-repeat;
		
	}
	.in {
		//background-color: #F2F2F2;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
</style>
